<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			.mui-popover {
				height: 300px;
			}
		</style>
	</head>

	<body>

		<div class="mui-content" align="center">
			<a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;margin-top: 60px;">打开</a>

			<div id="middlePopover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a href="#">Item1</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item2</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item3</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item4</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item5</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item6</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item7</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item8</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item9</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#">Item10</a>
							</li>
						</ul>
					</div>
				</div>

			</div>

		</div>
		<script>
			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				alert('shown  ' + e.detail.id);
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				alert('hidden  ' + e.detail.id);
			});
		</script>
	</body>

</html>